<!-- 首页 -->
<template>
    <div class='app-container'>
          <el-button type="success" @click="dialogAddVisible = true" icon="el-icon-plus">添加</el-button>
          <myTable ref="mytable"
                 :config="tableconfig"
                 @handleSelectChange="handleSelectChange">
          <div slot="mytablebody">
          </div>
          <!-- 图片 -->
          <template v-slot:picture="{ data }">
              <el-image style="width: 100%; height: 40px" :src="data.picture"></el-image>
          </template>
          <!-- 图片路径 -->
          <template v-slot:pictureUrl="{ data }"> 
              <el-link class="blue-link" :underline="false">
                  {{data.pictureUrl}}
              </el-link>
          </template>
          <!-- 启动 -->
          <template v-slot:enable="{ data }">
              <el-switch
                  v-model="data.enable"
                  active-color="#13ce66"
                  inactive-color="#BFBFBF">
              </el-switch>
          </template>
          <!-- 操作 -->
          <template v-slot:operation="{ data }">
              <el-button type="primary" @click="handleEdit(data.id)">编辑</el-button>
              <el-button type="primary" @click="handleDelete(data.id)">删除</el-button>
          </template>
           </myTable>
          <!-- 删除弹框 -->
          <el-dialog title="删除" class="del-box" :visible.sync="dialogTableVisible" width="30%">
              <p>删除这条记录？</p>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogTableVisible = false" size="medium">取 消</el-button>
                  <el-button type="primary" @click="getSubmit" size="medium">确 定</el-button>
              </span>
          </el-dialog>
          <!-- 编辑弹框 -->
          <el-dialog title="编辑banner" class="edit-box" :visible.sync="dialogEditVisible" width="30%">
              <el-form :model="editForm">
                  <el-form-item label="名称：" :label-width="formLabelWidth">
                      <el-input v-model="editForm.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="上传：" :label-width="formLabelWidth">
                      <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false" :multiple="false" :limit="1">
                          <img v-if="editForm.fileUrl" :src="editForm.fileUrl" class="avatar"></img>
                          <i v-else slot="default" class="el-icon-picture-outline"></i>
                          <div class="el-upload__tip" slot="tip">支持jpg/png格式，RGB模式，尺寸：1920x400px，大小不超过20M</div>
                      </el-upload> -->
                          <el-upload
                              class="avatar-uploader"
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :show-file-list="false"
                              :disabled="uploadBoolean"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload">
                          <img v-if="editForm.fileUrl" :src="editForm.fileUrl" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          <div class="el-upload__tip" slot="tip">支持jpg/png格式，RGB模式，尺寸：1920x400px，大小不超过20M</div>
                          <!--页面新增删除和预览-->
                          <span v-if="editForm.fileUrl" class="el-upload-list__item-actions">
                              <span class="upload-icon">
                                  <span class="el-uploads-span" style="margin-right: 10px;" @click="oploadImgPre">
                                      <i class="el-icon-zoom-in"></i>
                                  </span>
                                  <span class="el-upload-span" @click="oploadImgDel">
                                      <i class="el-icon-delete"></i>
                                  </span>
                              </span>
                          </span>
                          <el-dialog v-model="oploadDialogVisible" size="tiny">
                              <img width="100%" :src="editForm.fileUrl" alt="">
                          </el-dialog>
                      </el-upload>
                  </el-form-item>
                  <el-form-item label="启用：" :label-width="formLabelWidth">
                      <el-switch
                          v-model="editForm.enable"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF">
                          </el-switch>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="getForm" size="medium">提交</el-button>
              </div>
  
          </el-dialog>
          <!-- 添加分类 -->
          <el-dialog title="筛选元器件类别" class="edit-box" :visible.sync="dialogAddVisible" width="30%">
              <el-form :model="addForm" :rules="addRules" ref="addForm">
                  <el-form-item label="类别名称：" :label-width="formLabelWidth" prop="name" class="formClass">
                      <!-- <el-input v-model="addForm.name" autocomplete="off"></el-input> -->
                      <el-select v-model="addForm.name" placeholder="请选择">
                        <el-option style="height: auto;" :value="[]" class="treebox">
                            <el-tree 
                                :data="data"
                                show-checkbox
                                node-key="id"
                                :props="defaultProps">
                                </el-tree>
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="上传：" :label-width="formLabelWidth" prop="fileUrl">
                      <imageUpload v-model="addForm.fileUrl"></imageUpload>
                  </el-form-item>
                  <el-form-item label="启用：" :label-width="formLabelWidth">
                      <el-switch
                          v-model="addForm.enable"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF">
                          </el-switch>
                  </el-form-item> -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="getForm('addForm')" size="medium">提交</el-button>
              </div>
  
          </el-dialog>
    </div>
  </template>
  
  <script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import { getToken } from "@/utils/auth";
  import imageUpload from "@/components/imageUpload"
//   import {allBanner} from "@/api/home"
  
  export default {
      components:{
          imageUpload
      },
    data () {
      //这里存放数据
      return {
          paramsbox:{
              // available: 0,
              // creatorId: "",
              // id: 0,
              // modifierId: "",
              // name: "",
              pageNo: 1,
              pageSize: 20,
              // picturePath: "",
              // secondaryPagePath: "",
              // size: ""
          },
          tableconfig: {
              loading: false,
              isselection: false,
              ispagination: true,
              tabledata: [
                  {
                      id:1222,
                      name:'MCU / 通用MCU / MCU1',
                      operation:''
                  }
              ],
              isindex: true,
              thead: [
                { sort: null, label: '序列号', prop: 'id', width: 150 },
                { sort: null,  prop: 'name',label: '类别名称'},
                { sort: null, label: '操作', prop: 'operation',type: 'slot',width: 400  },   
              ],
              currentpage: 1,
              pagesize: 0,
              total: 0,
          },
          dialogTableVisible:false,
          dialogEditVisible:false,
          dialogAddVisible:false,
          uploadBoolean:false,
          oploadDialogVisible:false,
          data: [{
            id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                id: 9,
                label: '三级 1-1-1'
                }, {
                id: 10,
                label: '三级 1-1-2'
                }]
            }]
            }, {
            id: 2,
            label: '一级 2',
            children: [{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 6,
                label: '二级 2-2'
            }]
            }, {
            id: 3,
            label: '一级 3',
            children: [{
                id: 7,
                label: '二级 3-1'
            }, {
                id: 8,
                label: '二级 3-2'
            }]
            }],
            defaultProps: {
            children: 'children',
            label: 'label'
            },
            editForm:{
                name:'官网banner',
                path:"https://image.baidu.com/search/detail.jpg",
                fileUrl:'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                enable:false
            },
          addForm:{
              name:'',
              selectName:'',
              enable:false
          },
          addRules:{
              name: [
                  { required: true, message: '请输入名称', trigger: 'blur' },
              ],
              fileUrl: [
                  { required: true, message: '请上传文件', trigger: 'blur' },
              ],
          },
          formLabelWidth:'120px'
      };
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleSelectChange(section) {
          this.selectrow = section;
      },
      handleDelete(id){
          console.log(id,'id');
          this.dialogTableVisible = true;
      },
      handleEdit(id){
          console.log(id,'id');
          this.dialogEditVisible = true;
      },
      getSubmit(){
  
      },
      getForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
      },
      handleAvatarSuccess(res, file) {
          this.editForm.fileUrl = URL.createObjectURL(file.raw);
          if(this.editForm.fileUrl){
              this.uploadBoolean = true
          }
      },
      beforeAvatarUpload(file) {
          let types = ['image/jpeg', 'image/jpg', 'image/png'];
          const isJPG = types.includes(file.type);
          const isLt2M = file.size / 1024 / 1024 < 20
  
          if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG、JPEG、PNG 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 20MB!');
          }
          return isJPG && isLt2M;
      },
      oploadImgPre(){
          this.oploadDialogVisible = true
      },
      oploadImgDel(){
          this.editForm.fileUrl = ''
          let _this= this
          setTimeout(function(){
              console.log(_this)
              _this.uploadBoolean = false
          },1000)
      },
        async doQuery() {
        //     // 获取表格
        //     this.tableconfig.loading = true;
        //     this.tableconfig.currentpage = this.paramsbox.pageNo;
        //     this.tableconfig.pagesize = this.paramsbox.pageSize;
        //     let data1 = await allBanner(this.paramsbox);
        //     console.log(data1);
        //     if(data1.success){
        //         this.tableconfig.total = data1.result.count;
        //         this.tableconfig.tabledata = data1.result.data;
        //     }
        //     this.tableconfig.loading = false;
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
      this.doQuery();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    },
  }
  </script>
  <style scoped lang="scss">
  @import './../../assets/reset.css';
  .app-container{
    width: 100%;
    padding: 20px 30px
  }
  .table-box{
      margin-top: 25px;
  }
  .blue-link{
      color: #1890FF;
  }
  .del-box{  
      p{
          line-height: 30px;
          font-size: 20px;
          // font-weight: 600;
          color: #333333;
          text-align: center;
      }  
  }
  .dialog-footer{
      text-align: center;
      margin-top: 20px;
  }

 .formClass{
    margin-bottom: 200px;
 }
 .el-select{
    width: 80%;
 }
  </style>